<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/app-common-2.00.0.js"></script>
<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${webroot}/static/js/dcalendar.picker.js"></script>
<link rel="stylesheet" type="text/css" href="${webroot}/static/css/dcalendar.picker.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="${webroot}/static/css/forms.css" />
<html lang="en">
<head>
<style type="text/css">
label {
    width: 80px;
}
  .layui-btn-sms {
    height: 25px;
    line-height: 19px;
    padding: 0 10px;
    font-size: 12px;
    width: 45px;
    background-color: white;
    color: #000000e0;
    border: 0.5px solid #000000e0;
}
.table>tbody>tr>td, .table>tfoot>tr>td {
    text-align: center;
    vertical-align: middle;
}
</style>
</head>
<body>
	<div>
		<form class="order-form" id="filterForm">
			<input type="hidden" id="fh" name="fh" /> <input type="hidden"
				id="hf" name="hf" />
			<div class="control-group clearfix" style="width: 15%;">
				<label>名称:</label>
				<div class="control">
					<input type="text" class="control-input" id="word" name="word">
				</div>
			</div>
			<div class="control-group clearfix" style="width: 15%;">
				<label>拼音:</label>
				<div class="control">
					<input type="text" class="control-input" id="pinyin" name="pinyin">
				</div>
			</div>
			<div class="control-group clearfix" style="width: 15%;">
				<div class="control">
				   <input type="button" value="查询" id="btn_query" class="layui-btn layui-btn-sm layui-btn-normal"/>&nbsp;
			       <input type="button" value="重置" id="btn_reunion" class="layui-btn layui-btn-sm layui-btn-danger"/>
				</div>
			</div>
		</form>
		<div style="position: relative;top: -11px;height: 38px;">
		   <input type="button" value="添加" id="adbut" class="layui-btn" onclick="updates(null)" />
		   <input type="button" value="导入数据" id="adbut" class="layui-btn" onclick="import_btn()" />
		</div>
		<form id='dictGridDiv'></form>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();
		$("#btn_query").click(function() {
			$("#dictGridDiv").bootstrapTable('destroy');
			var oTable = new TableInit();
			oTable.Init();
		});
		$("#btn_reunion").click(function() {
			$("#word").val("");
			$("#pinyin").val("");
			$("#dictGridDiv").bootstrapTable('destroy');
			var oTable = new TableInit();
			oTable.Init();
		});
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#dictGridDiv')
					.bootstrapTable(
							{
								url : '${webroot}/parameter/querypage',
								dataType : "json",
								toolbar : '#toolbar', //工具按钮用哪个容器
								striped : true, //是否显示行间隔色
								singleSelect : false,
								pagination : true, //分页
								pageNumber : 1, //初始化加载第一页，默认第一页
								queryParams : queryParams,
								pageSize : 10, //每页的记录行数（*）
								pageList : false, //可供选择的每页的行数（*）
								//search: true, //显示搜索框
								sidePagination : "server", //服务端处理分页
								columns : [
										{
											field : 'id',
											title : '序号',
											align : 'center',
											width : '90'

										},
										{
											field : 'word',
											title : '名称',
											align : 'center',
											width : '180'
										},
										{
											field : 'pinyin',
											title : '拼音',
											align : 'center',
											width : '280'
										},
										{
											field : 'count',
											title : '数量',
											align : 'center',
											width : '280'
										},{
											field : 'length',
											title : '长度',
											align : 'center',
											width : '280'
										},{
											field : 'baseCount',
											title : '基数',
											align : 'center',
											width : '280'
										},{
											field : 'pinyinLength',
											title : '拼音长度',
											align : 'center',
											width : '280'
										},
										{
											title : '选项',
											align : 'center',
											width : '280',
											formatter : function(value, row,index) {
												var str = '<input type="button" value="修改" class="layui-btn layui-btn-primary layui-btn-sms" onclick="updates(\''+ row.id+ '\')" /> &nbsp&nbsp';
												return str;
											}
										} ]
							});
		};
		function queryParams(params) {
			return {
				pageSize : params.limit, //页面大小
				pageNumber : params.offset, //页码
				word : $("#word").val(),
				pinyin : $("#pinyin").val(),
			};
		}
		return oTableInit;
	};
	
	function updates(id) {
		var titie = ""; var url = "";
		if(id != null){
			titie ="修改";
			url = "${webroot}/parameter/detail?id="+ id;
		}else{
			titie ="添加";
			url = "${webroot}/parameter/detail";
		}
		var layerIndex = layer.open({
			type : 2,
			shade : [0.3,'#000'],
			fix : false,
			title : titie,
			maxmin : true,
			Method : "POST",
			content : url,
			area : [ '45%', '80%' ],
			end : function(index) {
				//刷新页面
				$("#dictGridDiv").bootstrapTable('destroy');
				var oTable = new TableInit();
				oTable.Init();
			}
		});
	}
	
	function import_btn(){
		var layerIndex = layer.open({
			type : 2,
			shade : [0.3,'#000'],
			fix : false,
			title : "词汇导入列表",
			maxmin : true,
			Method : "POST",
			content : "${webroot}/parameter/improt",
			area : [ '65%', '60%' ],
			end : function(index) {
				//刷新页面
				$("#dictGridDiv").bootstrapTable('destroy');
				var oTable = new TableInit();
				oTable.Init();
			}
		});
	}
</script>
</html>